<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-input v-model="form.account_name" class="w-40" placeholder="账号名称"></el-input>
        <el-select v-model="form.purchase_account_id" style="max-width: 160px" multiple collapse-tags clearable placeholder="采购人员">
          <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
        </el-select>
        <el-select v-model="form.account_type" style="max-width: 160px" multiple collapse-tags clearable placeholder="账号类型">
          <el-option v-for="(d, i) in options.account_type" :key="i" :label="d.label" :value="d.value"></el-option>
        </el-select>
        <VGroup>
          <div class="v-group-item">更新时间</div>
          <el-date-picker
            v-model="form.dateRange.value"
            type="daterange"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="日期开始"
            end-placeholder="日期结束"
            style="max-width: 300px"
          />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <!-- <el-button @click="expt">导出</el-button> -->
        <el-button @click="expt">
          <span class="flex items-center"> <svg-icon icon-class="import" class="mr-[4px]" /> 导出 </span>
        </el-button>

        <el-button type="primary" class="ml-auto" @click="create(tableRef)">新增</el-button>
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <XLog ref="logRef" />
  </VPage>
</template>

<script setup lang="jsx" name="Account">
import api from "./api"
import Add from "./components/Add.vue"
import XLog from "@/components/XLog"
import { getOption } from "@/api/public"
import { ElMessage } from "element-plus"
import XEUtils from "xe-utils"

const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 新增
const addRef = ref()
const create = () => {
  addRef?.value.open()
}

// 获取options
const options = ref({})
getOption({ type: "purchase_account" }).then((res) => {
  options.value = res.data
})

// 导出
const expt = () => {
  loadings.expt = true
  api
    .export()
    .then((blob) => {
      ElMessage.success("导出成功，开始下载")
      tableRef?.value.$table.saveFile({ filename: "account " + XEUtils.toDateString(new Date(), "yyyyMMddhhmmss"), type: "xlsx", content: blob })
    })
    .finally(() => {
      loadings.expt = false
    })
}

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {
      account_name: "",
      purchase_account_id: [],
      account_type: [],
      dateRange: { type: "update_time", value: [], range: true },
    },
  },
  columns: [
    { type: "seq", title: "编号", fixed: "left", width: 60 },
    { field: "platform_type_name", title: "平台类型", width: 100 },
    { field: "account_name", title: "账号名称", minWidth: 120 },
    { field: "role", title: "对应采购人员", width: 120 },
    { field: "alipay_account", title: "下单支付宝账号", width: 140 },
    { field: "account_type_name", title: "账号类型", width: 100 },
    { field: "company_id_name", title: "公司主体", minWidth: 120 },
    { field: "create_user", title: "添加人", width: 120 },
    { field: "update_time", title: "更新时间", width: 150 },
    { field: "auth_status_name", title: "授权状态", width: 90 },
    { field: "status_name", title: "状态", width: 70 },
    {
      title: "操作",
      width: 150,
      fixed: "right",
      slots: {
        default: ({ row, rowIndex }) => {
          const { pa_id } = row
          return [
            <div>
              <el-button link type="primary" onClick={() => addRef?.value.open(pa_id)}>
                修改
              </el-button>
              <el-button link type="primary" onClick={() => logRef?.value.open({ log_type: "purchase_account", pa_id })}>
                日志
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page }),
    },
  },
})
</script>
